<template>
    <div class="charts">
      <v-chart :option="getOptions()"></v-chart>
    </div>
  </template>
  
  <script setup lang="ts">
  //图形图标的配置项
  const getOptions = () => {
    return {
      xAxis: {
        show: false,
        //设置最大数值
        max: 100,
        //设置最小数值
        min: 0,
      },
      yAxis: {
        //均分
        type: "category",
        show: false,
      },
      series: {
        type: "bar",
        data: [33],
        //柱状图的宽度
        barWidth: 10,
        //背景颜色
        backgroundStyle:{
            color:'#ccc'
        },
        //柱条的颜色
        showBackground:true,//设置柱条的背景颜色，需要变为真
        itemStyle: {
          color:'yellowgreen'
        },
        //显示数值的标签
        label:{
            show:true,
            //文字位置
            position:'right',
            //自定义数值
            formatter:'|',
            color:'yellowgreen'
        }
      },
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    };
  };
  </script>
  
  <style scoped>
  .charts {
    width: 100%;
    height: 100%;
  }
  </style>